<template>
  <a-modal
    id="addBannersModal"
    title="添加轮播图"
    :width="500"
    :visible="visible"
    @ok="submit"
    @cancel="visible = false"
  >
    <a-form :form="form" v-bind="formLayout">
      <a-form-item label="轮播图片">
        <a-upload
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :action="aliOssConfig.uploadUrl"
          :before-upload="beforeUpload"
          :data="formData"
          @change="handleChange"
        >
          <img style="width: 100%" v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { AddBanner } from '@/api/system'
import { getFormData } from '@/utils/aliOss/aliossUpload.js'
import aliOssConfig from '@/utils/aliOss/config'
console.log(getFormData())
import moment from 'moment'
export default {
  name: 'AddBannerForm',
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {
          span: 5,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 17,
        },
        sm: {
          span: 17,
        },
      },
    }
    return {
      form: this.$form.createForm(this),
      loading: false,
      imageUrl: '',
      formData: {},
      moment,
      aliOssConfig: aliOssConfig,
    }
  },
  methods: {
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      console.log(info.file.status)
      if (info.file.status == 'done') {
        this.imageUrl = this.aliOssConfig.uploadUrl + '/' + this.formData.key
        console.log(this.imageUrl)
        this.loading = false
      }
    },
    beforeUpload(file) {
      this.formData = getFormData()
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('请上传图片类型文件!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片最大体积为2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    submit() {
      var that = this
      const {
        form: { validateFields },
      } = this

      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          AddBanner({
            image: that.imageUrl,
          }).then((res) => {
            if (res.code == 0) {
              that.$message.success('轮播图创建成功')
              that.form.resetFields()
              that.$emit('ok')
            }
          })
        }
      })
    },
  },
}
</script>
